<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/login.css" rel="stylesheet" />
		<script src="js/mui.js"></script>
		<script src="js/weixin_utils.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function(){
				// tap：触屏事件
				document.getElementById("newuser_but").addEventListener("tap",function(){
					//跳转注册
					plus.webview.open("register.html","register.html")
				})
				
				// 发送登录请求
				document.getElementById("login-button").addEventListener("tap",function(){
					var account = document.getElementById('account').value;
					var password = document.getElementById('password').value;
					
					util.ajax({
						url:api.login,
						data:{
							"account":account,
							"password":password
						},
						success:function(data){
							if(data.code == 200 && data.httpCode == 200){
								data.msg = "登录成功！";
								//把用户对象保存到本机的数据库
								var user = data.data.info;//user是JSON对象
								var userToken = data.data.accessToken;//user是JSON对象
								util.setUser(user);
								util.setUserToken(userToken);
								// 获取当前页面
								var cpage = plus.webview.currentWebview();
								//跳转至首页
								plus.webview.open("index.html","index.html");
								// 关闭注册页
								cpage.close();
							}
							plus.nativeUI.toast(data.msg);
						}
					});
				})
				
				
			})
		</script>
	</head>

	<body>
		<div class="login-page container" style="padding-top: 270px; display: flex; justify-content: center;">
			<form class="mui-input-group content" style="">
			    <div style="border-top: none;">
					<input id="account" type="text" class="mui-input-clear" placeholder="账号/手机号/邮箱" style="border-bottom: 1px solid #e5e5e5;padding: 0;">
			    </div>
			    <div class="mui-input-row">
			        <input id="password" type="password" class="mui-input-password" placeholder="密码"  style="border-bottom: 1px solid #e5e5e5;padding: 0;">
			    </div>
			    <div class="mui-button-row" style="margin-top: 20px;">
					<button id="login-button" type="button" data-loading-text="登录中" data-loading-icon-position="right" class="mui-btn" style="border: 0;">登录</button>
			    </div>
				<div style="display:flex; justify-content: space-between;font-size: 14px;margin-top: 6px;">
					<a style="color: rgb(37, 171, 224)">忘记密码?</a>
					<a id="newuser_but" style="color: rgb(37, 171, 224)">新用户注册</a>
				</div>
			</form>
		</div>
		<div class="login-footer">
			<label>登录即代表阅读并同意</label>
			<a href="#">服务条款</a>
		</div>
	</body>

</html>
<script type="text/javascript">
mui(document.body).on('tap', '.mui-btn', function(e) {
    mui(this).button('loading');
    setTimeout(function() {
        mui(this).button('reset');
    }.bind(this), 500);
});

var originalHeight = document.documentElement.clientHeight || document.body.clientHeight;
	window.onresize = function() {
		//软键盘弹起与隐藏  都会引起窗口的高度发生变化
		var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
		if (resizeHeight * 1 < originalHeight * 1) { //resizeHeight<originalHeight证明窗口被挤压了
			plus.webview.currentWebview().setStyle({
				height: originalHeight
			});
		}
	}

</script>